<template>
    <div>
        <van-tabs v-model="searchIndex" sticky animated @change="changeTabs">
            <van-tab title="全部"></van-tab>

            <van-tab title="待付款"></van-tab>

            <van-tab title="待收货"></van-tab>

            <van-tab title="待评价"></van-tab>
        </van-tabs>
        <div class="height44"></div>
        <van-list
            v-model="loading"
            :finished="finished"
            finished-text=""
            @load="getOrders(searchIndex)"
        >
            <!-- <van-panel v-for="(item, index) in orderList" :title="'订单：' + item.shopOrder.orderSn"  :status="item.shopOrder.orderStatusStr" :key="item.shopOrder.orderSn" style="margin-top: 15px;"> -->
            <van-panel v-for="(item, index) in orderList" :title="item.shopOrder.createTime.substring(0,16)"  :status="item.shopOrder.orderStatusStr" :key="item.shopOrder.orderSn" style="margin-top: 15px;">
                <router-link :to="`/order/detail/${item.shopOrder.orderSn}`">
                      <van-card
                        v-for="goods in item.shopOrderItemsList"
                        :key="goods.goodsId"
                        :num="goods.productNum"
                        :price="goods.totalPrice | money"
                        :desc="goods.goodsSpecName"  
                        :title="goods.title"
                        :thumb="`/images/${goods.titleImage}`"
                    />
                    <!-- 判断展示付款方式 -->
                    <div class="textFenQi">姓名：{{item.shopOrder.userName}}</div>
                    <div class="textFenQi">手机：{{item.shopOrder.mobile}}</div>
                </router-link>
                <div slot="footer" class="footer">
                    <van-button size="small" v-if="item.shopOrder.orderStatus == 4" @click="$router.push('/order/expressList?orderSn=' + item.shopOrder.orderSn)">查看物流</van-button>
                    <van-button size="small" v-if="item.shopOrder.orderStatus == 2 || item.shopOrder.orderStatus == 1" @click="delOrder(item.shopOrder.orderSn, index)">取消订单</van-button>
                    <van-button size="small" type="primary" v-if="item.shopOrder.orderStatus == 2 || item.shopOrder.orderStatus == 1" @click="$router.push({path: '/order/payOrder', query: {order: `|${item.shopOrder.orderSn}|`}})">立即付款</van-button>
                    <van-button size="small" type="primary" v-if="item.shopOrder.orderStatus == 4" @click="confirmReceiveGoods(item.shopOrder.orderSn, index)">确认收货</van-button>
                    <van-button size="small" type="primary" v-if="item.shopOrder.orderStatus == 10 && searchIndex == 3" @click="$router.push('/order/commentList/' + item.shopOrder.orderSn)">评价</van-button>
                    <!-- <van-button size="small" type="primary" v-if="item.shopOrder.orderStatus != 1">退款</van-button> -->
                </div>
            </van-panel>
        </van-list>
        <div v-if="showNoData" style="width:100%; text-align:center; padding-top:50px;">            
            <img v-if="searchIndex == 0" src="../../static/img/orderStatu1.png" style="width:60%"/>
            <img v-if="searchIndex == 1" src="../../static/img/orderStatu2.png" style="width:60%"/>
            <img v-if="searchIndex == 2" src="../../static/img/orderStatu3.png" style="width:60%"/>
            <img v-if="searchIndex == 3" src="../../static/img/orderStatu4.png" style="width:60%"/>
        </div>
    </div>
</template>

<script>
export default {
    name: 'saleList',
    data() {
        return {
            searchType: 0, //0：所有订单 1：待付款 2：待发货 3：待收货 4：待评论 5：已完成 
            pageNum: 0,
            pageSize: 10,
            total: -1,
            getRequeat: true,
            orderList: [],
            showNoData: false,
            loading: false,
            finished: false,
        }
    },

    methods: {
        confirmReceiveGoods(orderId, index) {
            this.$dialog.confirm({
                message: '是否确认收货？'
            }).then(() => {
                this.$http.post('/shop//order/front/confirmReceiveGoods', {
                    orderId:orderId,
                    token: localStorage.getItem('token')
                }).then(res => {
                    console.log(res)
                    if (res.status === 0) {
                        this.$toast.success('确认成功');
                         this.orderList.splice(index, 1);
                    } else {
                        this.$toast.fail(res.message);
                    }
                })
            }).catch(() => {})
        },

        delOrder(orderId, index) {
            this.$dialog.confirm({
                message: '是否取消订单？'
            }).then(() => {
                this.$http.post('shop/order/front/cancelOrder', {
                    token: localStorage.getItem('token'),
                    orderId
                }).then(res => {
                    if (res.status === 0) {
                        this.$toast.success('取消成功');
                        this.orderList.splice(index, 1);
                    } else {
                        this.$toast.fail(res.message);
                    }
                })
            }).catch(() => {})
        },

        getOrders(type) {
            console.log('1234----')
            if (this.total !== -1 && this.pageNum >= this.total) {
                this.finished = true;
                this.loading = false;
                return;
            }
            this.pageNum++;
            this.loading = true;
            this.$http.post('/shop/order/front/getRecommendOrderList', {
            //this.$http.post('/shop/order/front/getUserOrderList', {
                token: localStorage.getItem('token'),
                searchType: type,
                pageNum: this.pageNum,
                pageSize: this.pageSize
            }).then(res => {
                this.loading = false;
                console.log('---获取销售订单列表数据成功---')
                console.log(res)
                if (res.status === 0) {
                    this.total = res.data.total;
                    if (this.pageNum==1 && res.data.total==0) {
                        this.showNoData = true
                    } else {
                        this.showNoData = false
                    }
                    this.orderList = this.orderList.concat(res.data.rows);
                    if (this.pageNum == this.total|| (this.pageNum == 1 && res.data.rows.length == 0)) {
                        this.finished = true;
                    }
                    console.log(this.showNoData)
                } else {
                    this.finished = true;
                    this.$toast.fail(res.message);
                }
            })
        },
        changeTabs() {
            this.pageNum = 0; 
            this.total = -1; 
            this.finished = false;
            this.orderList = []; 
            console.log('v-model:' + this.searchIndex)
            this.$router.replace({path: '/sale/list', query: {type: this.searchType, showItemIndex: this.searchIndex}})

            if (this.searchIndex == 2) {
                this.getOrders(3)
            } else if (this.searchIndex == 3) {
                this.getOrders(4)
            } else {
                this.getOrders(this.searchIndex)
            }
            
        }
    },

    created() {
        console.log('created!')
        if (this.$route.query.showItemIndex) {
            this.searchIndex = this.$route.query.showItemIndex;
            this.searchType = this.$route.query.type;
            if (this.searchIndex == 2) {
                this.getOrders(3)
            } else if (this.searchIndex == 3) {
                this.getOrders(4)
            } else {
                this.getOrders(this.searchIndex)
            }
        }        
    }
}
</script>

<style scoped lang="less">
/deep/ .van-tabs {
    position: fixed;
    top: 46px;
    width: 100%;
    z-index: 2;
}
/deep/ .van-cell__title {
    flex: 5;
}
/deep/ .van-card{
    background: #fff;
}
/deep/ .van-tab--active{
    color: #ff6700 !important
}
/deep/ .van-tabs__line{
    background-color: #ff6700 !important
}
/deep/ .van-panel__header-value{
    color: #ff6700;
}
/deep/ .van-button--default{
    color: #999999;
    background-color: #fff;
    border: 1px solid #ddd;
}
/deep/ .van-button--primary{
    color: #ff8b36;
    background-color: #fff;
    border: 1px solid #ff8b36;
}
/deep/ .van-card__price{
    color:#292621;
    font-size: 16px;
}
.footer {
    display: flex;
    justify-content: flex-end;
    /deep/ .van-button {
        margin-left: 5px;
    }
}
.textFenQi{background-color:#fff; color:#333; font-size:14px; padding:10px 15px; border-top: 1px solid #ebedf0; text-align: left;}
.height44{height: 44px;}
</style>
